<template>
  <div>
    <Header :cities="cities"></Header>
    <List :cities="cities" :hot="hotCities" />
    <Alpha :cities="cities" />
  </div>
</template>

<script>
import Header from './Header'
import List from './List'
import Alpha from './Alpha'
import { mapGetters, mapState } from 'vuex'
export default {
  name: 'CityIndex',
  components: {
    Header,
    List,
    Alpha
  },
  data() {
    return { letter: '' }
  },
  mounted() {
    this.$store.dispatch('getCityList')
  },
  computed: {
    ...mapState({
      cityList: (state) => state.city.cityList
    }),
    ...mapGetters(['hotCities', 'cities'])
  }
  // methods: {
  //   getCityInfo() {
  //     axios.get('/src/mock/city.json').then(this.handleGetCityInfoSucc)
  //   },
  //   handleGetCityInfoSucc(res) {
  //     res = res.data
  //     if (res.ret && res.data) {
  //       const data = res.data
  //       this.cities = data.cities
  //       this.hotCities = data.hotCities
  //     }
  //   },
  //   handleLetterChange(letter) {
  //     this.letter = letter
  //   }
  // },
}
</script>

<style lang="less" scoped></style>
